<template>
  <!-- 大盒子 -->
  <div class="nav-tou">
    <!-- 搜索框 -->
    <div class="zxz-ipt">
      <div class="ssk">
        <van-search
          v-model="value"
          show-action
          background="#4fc08d"
          label="上海"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <!-- <van-icon name="arrow-left" /> -->
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
        <!-- 下拉图标 -->
        <div @click="drop">
          <van-icon name="play" class="zfz-icon" />
        </div>
        <div class="zfz-line"></div>
      </div>
      <!-- 跳转箭头 -->
      <div class="arrows" @click="$router.back()">
        <van-icon name="arrow-left" />
      </div>
    </div>
    <div>
      <van-dropdown-menu>
        <!-- 区域 -->
        <van-dropdown-item v-model="value1" :options="option1">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
          />
        </van-dropdown-item>
        <!-- 方式 -->
        <van-dropdown-item v-model="value2" :options="option2" >
        <van-area  :area-list="areaList" :columns-num="2" />
        </van-dropdown-item>
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
      </van-dropdown-menu>
    </div>
    <!-- 内容遍历 -->
    <div class="zfz-max" v-for="item in articleList" :key="item.id">
      <router-view></router-view>
      <div class="zfz-max-img">
        <img :src="`http://liufusong.top:8080${item.houseImg}`" alt />
      </div>
      <div class="zfz-wz">
        <ul>
          <li>{{ item.title }}</li>
          <li>{{ item.desc }}</li>
          <li>{{ item.tags[0] }}</li>
          <li>{{ item.price }}/元</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
// export default {
//   name: 'UserPage',
// };
export default {
  name: 'ArticlePage',
  // articleList
  data() {
    return {
      articleList: [],
      value: '',
      value1: 0,
      value2: 'a',
      value3: 0,
      value4: 'a',
      option1: [{ text: '区域', value: 0 }],
      option2: [{ text: '方式', value: 'a' }],
      option3: [{ text: '区域', value: 0 }],
      option4: [{ text: '筛选', value: 'a' }],
      columns: [
        {
          text: '浙江',
          children: [
            {
              text: '杭州',
              children: [{ text: '西湖区' }, { text: '余杭区' }],
            },
            {
              text: '温州',
              children: [{ text: '鹿城区' }, { text: '瓯海区' }],
            },
          ],
        },
        {
          text: '福建',
          children: [
            {
              text: '福州',
              children: [{ text: '鼓楼区' }, { text: '台江区' }],
            },
            {
              text: '厦门',
              children: [{ text: '思明区' }, { text: '海沧区' }],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getArticleList();
  },
  methods: {
    //点击上海出现地址
    drop() {
      this.$router.push('/shanghai');
    },
    onSearch() {},
    async getArticleList() {
      try {
        const res = await this.$http({
          url: 'http://liufusong.top:8080/houses?cityId=AREA%7Cdbf46d32-7e76-1196&stat=1&end=10',
        });
        console.log(res.data.body.list);
        this.articleList = res.data.body.list;
      } catch (err) {
        console.log(err);
      }
    },
    tiaozhuan(id) {
      this.$router.push({
        path: `/detail/${id}`,
        //path:`地址？参数名称=`
      });
      // this.$router.push({
      //   path:`/detail/${id}`
      // })
    },
    onConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      Toast('取消');
    },
  },
};
</script>
<style lang="less" scoped>

/deep/ .van-picker__toolbar {
 width: 100%;
 display: flex;
 position: absolute;
 bottom: 0px;
 z-index: 99;
 border-top: 1px solid #e9e9e9;
 .van-picker__confirm {
  flex: 2;
  color: #fff;
  font-size: 18px;
  background-color: #21b97a;
 }
 .van-picker__cancel {
 flex: 1;
 color: #21b97a;
 background-color: #fff;
 font-size: 18px;
 }
}
.nav-tou {
  position: relative;

  .van-search__content {
     border-radius: 5px;
  }
  // .van-cell{
  //   border-left: 1px solid #999;
  // }
  .van-search__label{
   margin-right: 20px;
  }
  .arrows {
    position: absolute;
    top: 15px;
    left: 9px;
    font-size: 24px;
  }
  .zfz-line{
     position: absolute;
    top: 18px;
    left: 98px;
    width: 15px;
    height: 20px;
    border-right: 1px solid #a1a0a0;

  }
  .zfz-icon{
    position: absolute;
    top: 19px;
    left: 95px;
    font-size: 14px;
    transform: rotate(90deg);
  }
}
.van-search {
  padding: 10px 0 10px 48px;
}
.zfz-max {
  display: flex;
 .zfz-max-img{
  width: 106px;
  height: 80px;
  // background-color: pink;
  img{
    height: 100%;
    width: 100%;
  }
 }

  .zfz-wz {
  padding-left: 10px;
    ul {
      li {
        padding:2px;
        list-style: none;
      }
    }
  }
}
</style>
